<template>
    <div id="ClearHB">
        <mt-swipe :auto="2000">
            <mt-swipe-item v-for="item in msg"><a :href="item.url">
                <img :src="item.img">    
            </a></mt-swipe-item>
        </mt-swipe>
        <!--  MUI中的九宫格  修改路由-->
        <div class="mui-content clearfix">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/news/newslist">
		                    <span class="mui-icon mui-icon-home"></span>    
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="photo/photolist">
		                    <span class="mui-icon mui-icon-email"></span>
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="goods/goodslist">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/feedback">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">留言反馈</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/video">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">视频专区</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/callus">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">联系我们</div></router-link></li>
		        </ul> 
		</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            msg:'',
        }
    },
    created(){
        this.getImgs();
    },
    methods:{
        getImgs:function (){
            const url = this.$myurl.url;
            this.$http.get( url + '/api/getlunbo').then(res=>{
                if ( res.body.status != 0 ) {
                    this.$toast('获取失败.')
                    return ;
                }
                this.msg=res.body.message;
                console.log(res)
            })
        }
    }
}
</script>
<style scoped>
    .mui-icon-home:before,
    .mui-icon-email:before,
    .mui-icon-chatbubble:before,
    .mui-icon-location:before,
    .mui-icon-search:before,
    .mui-icon-phone:before
    {
        content: '';
        display: inline-block;
        width: 50px;
        height: 50px;
        background-repeat:round;
    }
     .mui-icon-home:before{
        background-image:url('../../strict/img/1.png');
     }
    .mui-icon-email:before{
        background-image:url('../../strict/img/2.png');
    }
    .mui-icon-chatbubble:before{
        background-image:url('../../strict/img/3.png');
    }
    .mui-icon-location:before{
        background-image:url('../../strict/img/4.png');
    }
    .mui-icon-search:before{
        background-image:url('../../strict/img/1.png');
    }
    .mui-icon-phone:before{
        background-image:url('../../strict/img/2.png');
    }
    .mui-grid-view.mui-grid-9{
        background: #fff;
        border:0px;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: none;
    }
</style>
